<template>
  <div class="dynamic-config">
    <!-- 公共配置 -->
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-if="selectWidgetBase.remote !== undefined"
        name="数据源配置"
      >
        <template slot="title">
          <div class="title">
            <i class="iconfont icon-peizhi"></i>
            <span>数据源配置</span>
          </div>
        </template>
        <el-form label-position="top">
          <!-- 动态数据配置项 -->
          <el-form-item label="是否使用动态数据源">
            <el-switch v-model="selectWidgetBase.remote"></el-switch>
          </el-form-item>
          <el-form-item v-if="selectWidgetBase.remote">
            <el-form class="data-source" size="mini">
              <el-form-item label="请求地址">
                <el-input v-model="selectWidgetData.url"></el-input>
              </el-form-item>
              <el-form-item label="请求方法">
                <el-radio-group v-model="selectWidgetData.method">
                  <el-radio-button label="GET">GET</el-radio-button>
                  <el-radio-button label="POST"> POST </el-radio-button>
                  <el-radio-button label="PUT"> PUT </el-radio-button>
                  <el-radio-button label="DELETE"> DELETE </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="响应数据处理">
                <el-tooltip
                  class="data-source__tip"
                  content="例如：return xxx.xxx"
                >
                  <i class="el-icon-info"></i>
                </el-tooltip>
                <el-input
                  v-model="selectWidgetData.responseFunc"
                  type="textarea"
                ></el-input>
              </el-form-item>
              <el-form-item label="是否组件初始化发送请求">
                <el-switch v-model="selectWidgetData.auto"></el-switch>
              </el-form-item>
              <el-button
                size="mini"
                type="primary"
                plain
                style="float: right; margin-top: 10px"
                :loading="requestLoading"
                :disabled="requestLoading"
                @click="requestHttp"
              >
                测试数据源
              </el-button>
            </el-form>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import widget from '@/mixins/widget'
export default {
  mixins: [widget],

  data() {
    return {
      activeNames: '数据源配置',
      requestLoading: false,
      requestVisible: false,
      requestHttpData: {}
    }
  },

  methods: {
    async requestHttp() {
      const dataSource = this.selectWidgetData
      try {
        this.requestLoading = true
        this.requestHttpData = await this.dynamicRequest(dataSource)
      } catch (error) {
        this.requestHttpData = error
      } finally {
        this.requestVisible = true
        this.requestLoading = false

        this.$alert(this.requestHttpData, '测试结果', {
          confirmButtonText: '确定'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dynamic-config {
  .data-source {
    position: relative;
    &__tip {
      position: absolute;
      top: -21px;
      left: 90px;
      z-index: 999;
    }
  }
}
</style>
